<div class="container page-container" id="my-account-container">
    <div class="page-header">
        <h2><span class="glyphicon glyphicon-user"></span> My Account</h2>
    </div>
    <div class="row">
        <div class="col-md-5 col-sm-6" style="margin-bottom: 1em;">
            <div class="row margin-top" style="margin-bottom: 1em;text-align: center">
                <img src="<?php if($details->profile_pic==''){ echo site_url().'assets/images/default-avatar.png';
                }else{echo site_url().'./uploads/'.$this->session->userdata('accid').'/'.$details->profile_pic;}?>" 
                alt="Profile Picture" class="img-thumbnail profile-pic-image" style="width: 200px;height: 200px;"/>
            </div>
            <div class="row margin-top" style="margin-bottom: 1em;text-align: center">
                <button class="btn btn-primary btn-browse-profile-pic">Change Profile Picture</button>
            </div>
            <div class="upload-profile-pic-container row hide">
                <p style="margin-left: 1em;">
                    <b>Note:</b> Image size must not be greater than 2MB.<br/>
                    <b>Allowed image formats:</b> jpg, jpeg, png, gif
                </p>
                <div class="input-group col-xs-12 col-sm-12 col-md-12" style="margin-bottom: 1em;">
                    <span class="input-group-btn">
                        <button class="btn btn-default btn-open-profile-pic" type="button" title="Browse File">Browse</button>
                    </span>
                    <input type="text" class="form-control profile-pic-path" disabled />
                </div>
                <div class="col-xs-6 col-sm-6 col-md-6">
                    <button class="btn btn-default btn-cancel-profile-pic" style="width: 100%">Cancel</button>
                </div>
                <div class="col-xs-6 col-sm-6 col-md-6">
                    <button class="btn btn-primary btn-upload-profile-pic" style="width: 100%">Upload</button> 
                </div>
                <input type="file" name="profile-pic-file" id="profile-pic-file" class="hide" accept="image/*" /> 
            </div>
        </div>
        <hr class="visible-xs">
        <div class="col-md-6 col-sm-6 form-group account-profile form-horizontal">
            <div style="margin-bottom: 1em;" class="text-left">
                <button class="btn btn-primary btn-edit-acc-profile">Edit Profile</button>
                <button class="btn btn-primary btn-change-pass">Change Password</button>
            </div>
            <div class="view-account-profile">
                <div class="form-group">
                    <label class="col-md-4 col-sm-4 col-xs-4">Name</label>
                    <div class="col-md-8 sm-col-8 col-xs-8">
                        <span class="name"><?php echo $details->coord_lname.', '.$details->coord_fname.' '.$details->coord_mname;?></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-4 col-sm-4 col-xs-4">Birthday</label>
                    <div class="col-md-8 col-sm-8 col-xs-8">
                        <span class="bday"><?php echo $details->coord_bday;?></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-4 col-sm-4 col-xs-4">Gender</label>
                    <div class="col-md-8 col-sm-8 col-xs-8">
                        <span class="gender"><?php if($details->coord_gender=='0'){echo 'Male';}else{echo 'Female';};?></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-4 col-sm-4 col-xs-4">Home Address</label>
                    <div class="col-md-8 col-sm-8 col-xs-8">
                        <span class="address"><?php echo $details->coord_address;?></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-4 col-sm-4 col-xs-4">Email Address</label>
                    <div class="col-md-8 col-sm-8 col-xs-8">
                        <span class="email"><?php echo $details->coord_email;?></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-4 col-sm-4 col-xs-4">Contact No.</label>
                    <div class="col-md-8 col-sm-8 col-xs-8">
                        <span class="contact"><?php echo $details->coord_num;?></span>
                    </div>
                </div>
            </div>
            <div class="edit-account-profile hide form-horizontal">
                <form id="account-details-form" method="post">
                    
                </form>
            </div>
            <div class="hide change-pass-container form-horizontal">
                <div class="form-group">
                    <label class="col-md-4 my-acc-label">Old Password</label>
                    <div class="col-md-8">
                        <input type="password" class="form-control old-pass" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-4 my-acc-label">New Password</label>
                    <div class="col-md-8">
                        <input type="password" class="form-control new-pass" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-4 my-acc-label">Confirm Password</label>
                    <div class="col-md-8">
                        <input type="password" class="form-control confirm-pass" />
                    </div>
                </div>
                <div class="text-right">
                    <button class="btn btn-default btn-cancel-change-pass hide">Cancel</button>
                    <button class="btn btn-primary btn-update-password hide" disabled>Update</button>
                </div>
            </div>
        </div>
    </div>
</div>